<template>
    <div class="shouli">
        <ModalTitle title="受理员、派遣员画像" />
        <div class="shouli-chart" ref="shouliChart"></div>
    </div>
</template>

<script>
import ModalTitle from '@/components/ModalTitle/Index.vue';
import { DuiWuJingXiHua } from '@/api/zhangzi'
// 数组原型新增max方法，求数组中的最大值
Array.prototype.max = function () {
    let max = this[0];
    let len = this.length;
    for (let i = 1; i < len; i++) {
        if (this[i] > max) max = this[i]
    }
    return max
}
export default {
    components: {
        ModalTitle
    },
    data() {
        return {

        }
    },

    mounted() {
        this.shouliChartData()
    },

    methods: {
        async shouliChartData() {
            const res = await DuiWuJingXiHua.personnelPortraitAPI()
            console.log(res,'雷达');
            if (res.success) {
                let D = res.data
                let maxCount = []
                for (let i = 0; i < D.length; i++) {
                    D[i].link.forEach(e => {
                        maxCount.push(e.count)
                    });
                }
                let maxNum = maxCount.max()  //求雷达最大值
                //雷达一圈数据  多条数据公用一个外圈数据
                let radarOut = D[0].link.map(e => { return { name: e.name, max: maxNum } })
                let data2 = D[0].link.map(e => e.count)  //派遣员
                let data1 = D[1].link.map(e => e.count)  //受理员
                this.shouliChartFn(radarOut, data1, data2)
            } else {
                this.$message.error(res.message)
            }
        },
        /**
         * 绘制雷达图
         * @param {Array} radarOut 雷达一圈数据
         * @param {Array} data1:受理员数据 
         * @param {Array} data2:派遣员数据
         */
        shouliChartFn(radarOut, data1, data2) {
            let shouliCharts = echarts.init(this.$refs.shouliChart)
            const legend = {
                data: ['受理员', '派遣员'],
                orient: 'vertical',
                icon: 'circle', //图例形状
                padding: 0,
                top: 35,
                right: 20,
                itemWidth: 14, //小圆点宽度
                itemHeight: 14, // 小圆点高度
                itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
                textStyle: {
                    fontSize: 14,
                    color: '#00E4FF',
                },
            };
            let option = {
                tooltip: {
                    //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
                    confine: true,
                    enterable: true, //鼠标是否可以移动到tooltip区域内
                },
                legend,
                radar: {
                    name: {
                        textStyle: {
                            color: '#05D5FF',
                            fontSize: 14,
                        },
                    },
                    shape: 'polygon',
                    center: ['50%', '60%'],
                    radius: '75%',
                    startAngle: 80,
                    scale: true,
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(5, 213, 255, .8)',
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            width: 1,
                            color: 'rgba(5, 213, 255, .8)', // 设置网格的颜色
                        },
                    },
                    indicator: radarOut,
                    splitArea: {
                        show: false,
                    },
                },
                grid: {
                    position: 'center',
                },
                polar: {
                    center: ['50%', '50%'], // 默认全局居中
                    radius: '0%',

                },
                angleAxis: {
                    min: 0,
                    interval: 5,
                    clockwise: false,
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                },
                radiusAxis: {
                    min: 0,
                    interval: 20,
                    splitLine: {
                        show: false,
                    },
                },
                series: [
                    {
                        name: '受理员',
                        type: 'radar',
                        symbol: 'none', // 拐点的样式，还可以取值'rect','angle'等
                        symbolSize: 10, // 拐点的大小
                        itemStyle: {
                            normal: {
                                color: '#05D5FF',
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: '#05D5FF',
                                opacity: 0.5,
                            },
                        },
                        lineStyle: {
                            width: 2,
                            color: '#05D5FF',
                        },
                        label: {
                            normal: {
                                show: false,
                            },
                        },
                        data: [
                            {
                                value: data1,
                            },
                        ],
                    },
                    {
                        name: '派遣员',
                        type: 'radar',
                        symbol: 'none', // 拐点的样式，还可以取值'rect','angle'等
                        symbolSize: 10, // 拐点的大小
                        itemStyle: {
                            normal: {
                                color: '#36C68D',
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: '#36C68D',
                                opacity: 0.5,
                            },
                        },
                        lineStyle: {
                            width: 2,
                            color: '#36C68D',
                        },
                        label: {
                            normal: {
                                show: false,
                            },
                        },
                        data: [
                            {
                                value: data2,
                            },
                        ],
                    },
                ],
            };

            shouliCharts.setOption(option)
        }
    }
}
</script>

<style lang="less" scoped>
.shouli {
    width: 100%;
    height: 47.5rem;
    margin-top: 2.5rem;

    .shouli-chart {
        width: 100%;
        height: 38rem;
    }
}
</style>